<template>
	<view class="certification flex_c">
		<view class="nav_bar" style="background-color: rgba(255, 255, 255, 1);" v-if="from_type != 1">
			<uni-nav-bar color="#333" left-icon="left" title="" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="back"></uni-nav-bar>
		</view>
		
		<view class="nav_box" v-if="from_type != 1"></view>
		
		<view class="auth-content-text">
			<view class="auth-title">实名认证</view>
			<view class="auth-text">完成实名认证后可提升账号安全，享受更多平台权益，如现、发起活动、圈子管理等。</view>
		</view>
		

		<view class="content">

			<view class="list flex_center">
				<view class="label">姓名</view>
				<input type="text" placeholder="请输入"
					placeholder-class="input-placeholder"
					v-model="info.name"
					:disabled="status == 2"
				/>
			</view>

			<view class="list flex_center">
				<view class="label">身份证号</view>
				<input type="idcard"
					placeholder="请输入"
					placeholder-class="input-placeholder"
					v-model="info.idNo"
					:disabled="status == 2"
				/>
			</view>

		</view>

		<view class="btn" @click="onsubmit" v-if="status == 0 || status == 1">保存</view>
		
		<view>
			<u-modal 
				:show="showmodal"
				title="认证成功"
				content='您已完成实人认证'
				confirmText="我知道了"
				@confirm="back"
			></u-modal>
		</view>
		
	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	export default {
		components: {
			navBar,
		},
		data() {
			return {
				info: {
					name: '',
					idNo: '',
				},
				
				status: 0,
				
				showmodal: false,
				
				from_type: 0,

			}
		},
		methods: {
			
			onsubmit(){
				if(!this.info.name || !this.info.idNo){
					return this.$util.msg('请将信息填写完整');
				}
				uni.showLoading();
				this.$post('/tencent/getAdvFaceId',{
					...this.info,
					auth_type: 1,
					type: this.from_web
				},true,()=>{
					uni.hideLoading();
				}).then(res=>{
					uni.hideLoading();
					// this.showmodal = true;
					setTimeout(() => {
						window.location.href = res.data.url;
					}, 200)
				});
			},
			
			back(){
				this.showmodal = false;
				if(this.from_type == 1 || this.from_web == 1){
					// this.$util.back();
					window.history.back();
				}else {
					this.$native.backAction();
				}
			},
			
		},
		
		onLoad(option) {
			var auth = JSON.parse(option.data);
			this.from_type = option.from_type || 0;
			this.from_web = option.from_web || 0;
			if(auth.name){
				this.info.name = auth.name;
				this.info.idNo = auth.id_card_num;
				this.status = auth.auth_status;
			}
		}
	}
</script>

<style lang="less" scoped>
	.certification {
		background: #FFF;
		min-height: 100vh;
		padding: 32rpx 48rpx 64rpx;
	}
	
	.auth-content-text {
		width: 100%;
		.auth-title {
			font-weight: 500;
			font-size: 48rpx;
			color: #FD2A53;
			line-height: 66rpx;
		}
		
		.auth-text {
			font-size: 24rpx;
			color: #999999;
			line-height: 40rpx;
			margin: 24rpx 0 40rpx;
		}
	}

	.content {
		flex: 1;

		.list {
			width: 654rpx;
			height: 100rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			padding: 0 32rpx;
			margin-bottom: 20rpx;

			.label {
				font-size: 32rpx;
				color: #131313;
				line-height: 44rpx;
				margin-right: 16rpx;
			}

			input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				text-align: right;
			}
		}
	}


	.btn {
		width: 686rpx;
		height: 96rpx;
		background: #FD2A53;
		border-radius: 48rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
	}

	.remark {
		font-size: 28rpx;
		color: #666;
		margin-top: 16rpx;
	}

</style>